import React, { Suspense } from "react";
import '../../globle.css';
import './componentLs.css';
import ComponentList from "./components/componentList/ComponentList";
import SideWindow from "./components/SideWindow/sideWindow";
import subscriberAndRelease from "./componentGlobalData";

class Components extends React.Component {
    constructor(props) {
        super(props);
        subscriberAndRelease.setSubscri({
            name: "openmainDetail",
            value: this.openmainDetail
        })
    }
    state = {
        _option: {},
        isShowDetail: false,
        componentDynamic: null
    }
    openmainDetail = (item) => {
        this.setState({
            _option: item.detailOption,
            isShowDetail: item.isShowDetail,
        });
        this.setComponent(item)
    }
    setComponent(item) {
        if (item.detailOption.link) {
            import("./modules" + item.detailOption.link).then((mod) => {
                this.setState({
                    componentDynamic: mod.default ? mod.default : mod
                });
            })
        } else {
            this.setState({
                componentDynamic: null
            });
        }
    }
    closeDetail = () => {
        this.setState({
            isShowDetail: false
        });
    }
    render() {
        const DynamicComponent = this.state.componentDynamic ? this.state.componentDynamic : null;

        return (
            <div className="comonentBox">
                <div className="componentLi">
                    <ComponentList></ComponentList>
                </div>
                {
                    this.state.isShowDetail ? (
                        <SideWindow openDetail={this.state._option}
                            headerSlot={
                                this.state._option.name
                            }
                            contentslot={
                                DynamicComponent ? <DynamicComponent></DynamicComponent> : null
                            }
                        />
                    ) : null
                }
            </div>
        )
    }
}
export default Components;